<template>
    <div id="detail">
        <p class="page-title">财务明细</p>
        <div class="container padder">
            <el-form :inline="true">
                <el-form-item label="时间：">
                    <el-date-picker
                            v-model="searchForm.time"
                            type="daterange"
                            @change="getDetail"
                            start-placeholder="开始日期"
                            range-separator="至"
                            end-placeholder="结束日期"
                            value-format="timestamp"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    v-loading="loading"
                    style="width: 100%">
                <el-table-column
                        prop="create_time"
                        label="变动时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="biandong_yuanying"
                        label="变动原因"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="leixing"
                        label="资金类型">
                </el-table-column>
                <el-table-column
                        prop="biandong_jine"
                        label="变动金额（元）">
                </el-table-column>
                <el-table-column
                        prop="biandong_yue"
                        label="变动后金额（元）">
                </el-table-column>
                <el-table-column
                        prop="biandong_guanjianci"
                        label="变动关键词/订单号">
                </el-table-column>
            </el-table>
            <pagination :total="total" :options="searchForm" @change="getDetail"></pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'detail',
        components: {},
        data() {
            return {
                total:0,
                loading:true,
                searchForm: {
                    page: 1,
                    time: ''
                },
                tableData: []
            }
        },
        computed: {},
        methods: {
            getDetail() {
                this.loading = true;
                this.$axios.post(`/api/user/caiwu_mingxi`, this.searchForm)
                    .then(res => {
                        this.loading = false;
                        if (res.code === `200`) {
                            this.total = res.data.shuliang;
                            this.tableData = res.data.dingdan_data
                        }
                    })
            }
        },
        created() {
            this.getDetail();
        },
    }
</script>

<style lang="less" scoped>

</style>
